<template>
  <div :class="styles.recommend">
    <div :class="styles.recommendTitle">
      <div :class="styles.recommendTitleLeft">热门阿姨</div>
      <div @click="showMoreHandle" :class="styles.recommendTitleRight">
        <text>查看更多</text>
        <text :class="['iconfont icon-youjiantou_black12', styles.youjiantou]"></text>
      </div>
    </div>
    <AuntCard
      v-for="resume in resumes"
      :key="resume.id"
      :class="styles.recommendItem"
      :data="resume"
    />
    <div v-show="resumes.length >= 10" @click="showMoreHandle" :class="styles.recommendBottom">
      <text>点击查看更多</text>
      <text :class="['iconfont icon-youjiantou_black12', styles.youjiantou]"></text>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';
import AuntCard from '@/components/AuntCard/index.vue';
import { IResume } from '@/types';
import { getRecommendList } from '@/service/commodity.service';
import Taro, { useDidShow } from '@tarojs/taro';
import styles from './index.module.less';

export default {
  components: {
    AuntCard,
  },

  setup() {
    const resumes = ref<IResume[]>([]);

    useDidShow(async () => {
      resumes.value = await getRecommendList({ cityCode: '' });
    });
    const showMoreHandle = () => {
      Taro.navigateTo({
        url: '/subpackages/commodity-list/index',
      });
    };
    return {
      styles,
      resumes,
      showMoreHandle,
    };
  },
};
</script>
